<template>
  <view class="guide-container">
    <!-- 页面标题 -->
    <view class="guide-header">
      <view class="guide-title">新手租车指南</view>
      <view class="guide-subtitle">在线租车 全流程高效服务</view>
      <image class="guide-image" src="@/static/images/step/guide.png" mode="aspectFit"></image>
    </view>
    <!-- 指南内容 -->
    <view class="guide-content">
      <!-- 线上预订部分 -->
      <view class="guide-section">
        <view class="section-title">线上预订</view>
        <swiper class="step-swiper" style="height: 500px;" indicator-dots>
          <!-- 步骤 1 -->
          <swiper-item v-for="(item,index) in step1" :key="index">

            <view class="guide-step">
              <image class="step-image" :src="item.imgLoad"
                     mode="aspectFit" style="margin: auto"></image>
              <view class="step-icon">{{ index + 1 }}</view>
              <div class="step-text">
                <text class="step-description">{{ item.title }}</text>
              </div>

            </view>
          </swiper-item>
          <!-- 步骤 2 -->
          <!--          <swiper-item>-->
          <!--            <image class="step-image" :classstyle="{height:'100%'}" src="@/static/images/step/2.jpg" mode="aspectFit"></image>-->
          <!--            <view class="guide-step">-->
          <!--              <view class="step-icon">2</view>-->
          <!--              <div class="step-text">-->
          <!--                <text class="step-description">使用筛选条件找到适合你的车辆。</text>-->
          <!--              </div>-->

          <!--            </view>-->
          <!--          </swiper-item>-->
          <!--          &lt;!&ndash; 步骤 3 &ndash;&gt;-->
          <!--          <swiper-item>-->
          <!--            <image class="step-image" :classstyle="{height:'100%'}" src="@/static/images/step/3.jpg" mode="aspectFit"></image>-->
          <!--            <view class="guide-step">-->
          <!--              <view class="step-icon">3</view>-->
          <!--              <div class="step-text">-->
          <!--                <text class="step-description">选择车辆。</text>-->
          <!--              </div>-->

          <!--            </view>-->
          <!--          </swiper-item>-->
          <!--          <swiper-item>-->
          <!--            <image class="step-image" :classstyle="{height:'100%'}" src="https://example.com/book_car.jpg" mode="aspectFit"></image>-->
          <!--            <view class="guide-step">-->
          <!--              <view class="step-icon">4</view>-->
          <!--              <div class="step-text">-->
          <!--                <text class="step-description">确认订单与服务。</text>-->
          <!--              </div>-->

          <!--            </view>-->
          <!--          </swiper-item>-->
        </swiper>
      </view>
      <!-- 如何取车部分 -->
      <view class="guide-section">
        <view class="section-title">如何取车</view>
        <view class="guide-step-note-title">
          取车服务
        </view>
        <view class="guide-step-note-list">
          您可选到店/送车上门服务，请至约定地点取车
        </view>
        <view class="guide-step-note-list">
          如果您的行程变更请及时与我们联系
        </view>
        <view class="section-title" style="margin-top: 10px">如何取车</view>
        <view class="guide-step-note-title">
          取车流程
        </view>
        <view class="guide-step-note-list">
          核验证件
        </view>
        <view class="guide-step-note-list">
          订单费用/押金确认
        </view>
        <view class="guide-step-note-list">
          验车并签署协议
        </view>
      </view>
      <!-- 取车证件部分 -->
      <view class="guide-section">
        <view class="section-title">取车证件</view>
        <view class="guide-step-note-title">
          身份证原件
        </view>
        <view class="guide-step-note-list">
          二代身份证原件
        </view>
        <view class="guide-step-note-list">
          年满18周岁
        </view>
        <view class="guide-step-note-list">
          有效期2个月以上
        </view>
        <view class="guide-step-note-title">
          驾驶证原件
        </view>
        <view class="guide-step-note-list">
          原件正副本
        </view>
        <view class="guide-step-note-list">
          电子驾照提前申领
        </view>
        <view class="guide-step-note-list">
          有效期2个月以上
        </view>
      </view>
      <!-- 押金退还部分 -->
      <view class="guide-section">
        <text class="section-title">押金退还</text>
        <view class="guide-step-note-title">
          租车押金
        </view>
        <view class="guide-step-note-list">
          订车时需支付租车押金，如无异常情况，还车时全额退还
        </view>
        <view class="guide-step-note-title">
          违章押金
        </view>
        <view class="guide-step-note-list">
          还车需要支付违章押金，还车后30天无违章记录退还
        </view>
      </view>
    </view>
    <!-- 返回按钮 -->
    <view class="guide-footer">
      <button @click="goBack" class="back-button">返回</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      step1: [{
        imgLoad: require('@/static/images/step/1.jpg'),
        title: '选择用车时间与还取时间',
      }, {
        imgLoad: require('@/static/images/step/2.jpg'),
        title: '筛选车辆',
      },
        {
          imgLoad: require('@/static/images/step/3.jpg'),
          title: '选择车辆',
        },
        {
          imgLoad: require('@/static/images/step/4.jpg'),
          title: '支付订单',
        }]
    }
  },
  methods: {
    showImage(url) {
      uni.previewImage({
        urls: [require('@/static/images/step/1.jpg')],
        current: 0,
        fail: (res) => {
          console.error(res)
        },
        success: (res) => {
          console.log(res)
        }
      })
    },
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
}
</script>

<style scoped lang="scss">
.guide-container {
  padding: 20px;
  background: linear-gradient(to bottom, #007aff, #e0f2fe);
  min-height: 100vh;
}

.guide-header {
  margin-bottom: 20px;
  padding: 20px 0 0;
  position: relative;
}

.guide-image {
  position: absolute;
  width: 160rpx;
  height: 160rpx;
  right: 0;
  bottom: -20px;
}

.guide-title {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  display: inline-block;
  /* 修改下划线样式 */
  padding-bottom: 8px;
}

.guide-subtitle {
  font-size: 16px;
  color: #fff;
}

.guide-content {
  margin-bottom: 20px;
}

.guide-section {
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.section-title {

  font-size: 20px;
  font-weight: bold;
  color: black;
  margin-bottom: 10px;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: relative; /* 为伪类定位做准备 */
  padding-bottom: 8px;
  width: 90px;
}



/* 使用伪类添加下划线 */
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 5%;
  right: 5%;
  height: 4px;
  background-color: #007aff;
  border-radius: 2px;
}

.step-swiper {
  min-height: 200px; /* 根据实际情况调整高度 */
}

.guide-step {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.guide-step-note-title {
  font-weight: bold;
  position: relative;
  margin-top: 10px;
}

.guide-step-note-title::after {
  content: '';
  position: absolute;
  bottom: 10%;
  top: 10%;
  left: -10px;
  width: 3px;
  background-color: #1e3a8a;
  border-radius: 2px;
}

.guide-step-note-list {
  position: relative;
  margin-top: 10px;
  font-size: 12px;
}

.guide-step-note-list::after {
  content: '•';
  position: absolute;
  left: -10px;
  top: 2px;
  font-size: 10px;
  color: #1e3a8a;
}

.step-icon {
  width: 30px;
  height: 30px;
  background-color: #3b82f6;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
}

.step-text {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: space-between;
}

.step-title {
  font-size: 18px;
  font-weight: bold;
  color: #1e3a8a;
  margin-bottom: 5px;
}

//.step-description {
//  color: #6b7280;
//}

.step-image {
  width: 200px;
  height: 400px;
  border-radius: 5px;
}

.guide-footer {
  text-align: center;
}

.back-button {
  background-color: #3b82f6;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}
</style>